<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/iconfont.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/plugins/swiper/swiper.min.css" rel="stylesheet" />
    <style type="text/css">
        .row_info .ibox-content {
            height: 171px;
        }

        strong {
            color: #006666;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            padding-bottom: 10px;
        }

        .btn-default {
            background-color: #ffffff;
            border-color: #c2c2c2;
            color: #000000;
        }

        #echartsPanelInfo {
            height: 327px;
        }

        .content {
            display: none;
        }

        .active {
            display: block;
        }

        th {
            color: #009999 !important;
            background: #fff !important;
        

        }

        .swiper-slide{
                line-height: 19px;
                margin:4px 0;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row row_info" id="infoData">
            <!-- 接入信息、宿主机、虚拟机、其他设备 -->
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>监控告警信息</h5>
                    </div>
                    <div class="swiper-container ibox-content  fff" style="height: 200px;">
                        <ul class="swiper-wrapper pd5" id="control"></ul>
                        <div class="swiper-scrollbar"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>性能TOP10展现</h5>
                    </div>
                    <div class="ibox-content fff" style="height: 200px; overflow-y:auto;">
                        <table class="table table-striped table-bordered table-hover dataTables-example"
                            style="text-align: center;">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>系统名称</th>
                                    <th>主机名称</th>
                                    <th>CPU利用率</th>
                                    <th>内存利用率</th>
                                    <th>磁盘利用率</th>
                                </tr>
                            </thead>
                            <tbody id="performanceShow"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="echartsRes">
            <div class="col-sm-6">
                <div class="ibox" id="echartsPanelInfo">
                    <div class="ibox-title">
                        <h5>资源池容量信息</h5>
                    </div>
                    <select id="initPanel" class="form-control selectTab"
                        style="border-left-color: #ccc; border-right-color: #ccc;">
                        <!-- option -->
                    </select>
                    <div class="ibox-content content active" style="padding: 8px 10px;">
                        <div class="row">
                            <div class="col-xs-4">
                                <div id="echarts-panel-cpu" class="echarts"></div>
                            </div>
                            <div class="col-xs-4">
                                <div id="echarts-panel-memory" class="echarts"></div>
                            </div>
                            <div class="col-xs-4">
                                <div id="echarts-panel-disk" class="echarts"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>当日信息概览</h5>
                    </div>
                    <div class="ibox-content" style="height: 290px;">
                        <div class="row" style="margin: 0;padding: 0;" id="barRes">
                            <!-- 柱状图 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../js/plugins/echarts/echarts-all.js"></script>
    <script src="../js/plugins/echarts/infographic.js"></script>
    <script src="../js/plugins/echarts/macarons.js"></script>
    <script src="../js/plugins/echarts/roma.js"></script>
    <script src="../js/plugins/echarts/shine.js"></script>
    <script src="../js/plugins/swiper/swiper.min.js"></script>
    <script src="../js/handlebars-v3.0.1.js"></script>

    <script id="tpl" type="text/x-handlebars-template">
        {{! 接入、宿主机、虚拟机、其他设备模板 }}
        {{#each info}}
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>{{title}}</h5>
                </div>
                <div class="ibox-content" id="join">
                    {{#each data}}
                    <div class="row pb5">
                        <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                            {{#each subdata}}
                            <span class="iconfont {{this}}"></span>
                            {{/each}}
                            {{name}}
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                            <strong class="pr10">{{number}}</strong>
                        </div>
                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
                            {{des}}
                        </div>
                    </div>
                    {{/each}}
                </div>
            </div>
        </div>
        {{/each}}

        {{! 监控告警信息模板 }}
        {{#each control}}
            <li class="swiper-slide pl10 pr10 pt10" num="{{@index}}" style="color: #009999;">{{this}}</li>
        {{/each}}

        {{! 性能TOP10展现模板 }}
        {{#each performanceShow}}
            <tr>
                <td>{{num}}</td>
                <td>{{sys}}</td>
                <td>{{host}}</td>
                <td>{{cpu}}</td>
                <td>{{memory}}</td>
                <td>{{disk}}</td>
            </tr>
        {{/each}}

        {{! 初始化仪表盘集群 }}
        {{#each initPanelInfo}}
        <option value="{{clusterId}}">{{clusterName}}</option>
        {{/each}}

        {{! 柱状图模板 }}
        {{#each barInfo}}
        <div class="col-xs-4">
            <div id="{{echarts-type}}" class="echarts"></div>
        </div>
        {{/each}}

    </script>
    <script type="text/javascript">
        $(function () {

            // ---------- Handlebars模板引擎 ---------- 
            var tpl = $("#tpl").html(); //用jquery获取模板
            var template = Handlebars.compile(tpl); //预编译模板

            // ---------- 接入、宿主机、虚拟机、其他设备 ----------
            $.ajax({
                // url: getUrl() + '/index/contentList',
                url: '../data/index_v0/contentList.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var infoDataContext = response;
                    var infoData = template(infoDataContext); //匹配json内容
                    $("#infoData").html(infoData); //输入模板
                }
            });

            // ---------- 监控告警信息 ----------
            $.ajax({
                // url: getUrl() + '/index/alarmInfo',
                url: '../data/index_v0/alarmInfo.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var controlContext = response;
                    var control = template(controlContext); //匹配json内容
                    $("#control").html(control); //输入模板

                    // 数据自动滚动效果
                    var mySwiper = new Swiper('.swiper-container', {
                        direction: 'vertical',	// 滑动方向，可设置水平(horizontal)或垂直(vertical)。
                        slidesPerView: 6,	// 设置slider容器能够同时显示的slides数量
                        grabCursor: true, // 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                        // loop: true,		// 循环模式开启
                        autoplay: {		// 自动切换
                            delay: 1000,		// 每1秒自动切换
                            disableOnInteraction: false,	// 用户操作swiper之后，自动切换也不会停止
                        },
                        scrollbar: {	// 为Swiper增加滚动条
                            el: '.swiper-scrollbar',	// Scrollbar容器的css选择器或HTML元素
                            draggable: true,	// 允许拖动滚动条
                            dragSize: 'auto',	// 滚动条的尺寸，设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)
                        },
                        mousewheel: true,	// 开启鼠标滚轮控制Swiper切换
                    });

                    // 鼠标移入停止滚动，鼠标移出开始滚动
                    $(".swiper-container").mouseenter(function () {
                        mySwiper.autoplay.stop();
                    }).mouseleave(function () {//离开开启
                        mySwiper.autoplay.start();
                    });

                    // 模拟告警颜色
                    $("[num=1]").css("color", "#ed5565");
                    $("[num=3]").css("color", "#dfa254");

                }
            });



            // ---------- 性能TOP10展现 ----------
            $.ajax({
                // url: getUrl() + '/index/proTop',
                url: '../data/index_v0/proTop.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var perforContext = response;
                    var performanceShow = template(perforContext); //匹配json内容
                    $("#performanceShow").html(performanceShow); //输入模板
                }
            });


            // ---------- 初始化仪表盘集群切换 ----------
            $.ajax({
                // url: getUrl() + '/index/initCluster',
                url: '../data/index_v0/initCluster.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var initPanelContext = { "initPanelInfo": response };
                    var initPanelInfo = template(initPanelContext); //匹配json内容
                    $("#initPanel").html(initPanelInfo); //输入模板
                }
            });

            // ---------- 选择集群切换仪表盘 ----------
            $(".selectTab").change(function () {
                // console.log($("option:selected").val());
                var indexPanel = $("option:selected").val();
                $div = $("#content" + $(this).val()); // 当前div
                $div.parent().children(".content").hide(); // 其他div隐藏
                $div.show(); //你选中的div显示
                panelAjax(indexPanel);
            });

            // ---------- 仪表盘 ----------
            panelAjax(1);
            function panelAjax(id) {
                $.ajax({
                    // url: getUrl() + '/index/initIndexYibiaopan?clusterId=' + id,
                    url: '../data/index_v0/initPanel'+ id +'.json',
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        cpuFun(response.cpu.tota, response.cpu.used, response.cpu.seriesDATA[0].value);
                        memoryFun(response.memory.tota, response.memory.used, response.memory.seriesDATA[0].value);
                        diskFun(response.disk.tota, response.disk.used, response.disk.seriesDATA[0].value);
                    }
                });
            };

            // ---------- 仪表盘：cpu ----------
            var cpuPanel = echarts.init(document.getElementById('echarts-panel-cpu'), 'roma');
            var cpuOption;

            function cpuFun(cpuTotal, cpuUse, cpuData) {
                var cpuOption = {
                    title: {
                        text: 'CPU分配率',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 14
                        },
                        itemGap: 5,
                        x: 'center',
                        subtext: '总数：' + cpuTotal + '核' + '  ' + '已用：' + cpuUse + '核',
                        subtextStyle: {
                            fontSize: 10
                        },
                    },
                    tooltip: {
                        formatter: "{b} : {c}%",
                        confine: true,  // 是否将 tooltip 框限制在图表的区域内
                    },
                    series: [{
                        type: 'gauge', // 系列类型，仪表盘类型
                        center: ["50%", "55%"],
                        title: { // 仪表盘标题。
                            offsetCenter: [0, "100%"], //相对于仪表盘中心的偏移位置
                            color: "#999999", // 文字的颜色,默认 #333。
                            fontSize: 12, // 文字的字体大小,默认 15。
                        },
                        splitNumber: 10, // 仪表盘刻度的分割段数,默认 10
                        detail: { // 仪表盘详情，用于显示数据
                            offsetCenter: [0, "60%"], // 相对于仪表盘中心的偏移位置
                            fontSize: 14, // 文字的字体大小
                            color: "#000000", // 文字的颜色,
                            formatter: '{value}%', // 格式化函数或者字符串
                        },
                        radius: "75%", //仪表大小
                        axisTick: {
                            splitNumber: 2,         // 分隔线之间分割的刻度数,默认 5
                            length: 5,              // 刻度线长。支持相对半径的百分比,默认 8。
                        },
                        axisLine: { // 仪表盘轴线(轮廓线)相关配置
                            lineStyle: { // 仪表盘轴线样式
                                width: 12 // 仪表盘轴线宽度
                            }
                        },
                        axisLabel: { // 刻度标签。
                            distance: 1, // 标签与刻度线的距离,默认 5。
                            fontSize: 10, // 刻度的文字字体大小,默认 5。
                        },
                        splitLine: { // 分隔线样式。
                            length: 20, // 分隔线线长，默认30
                        },
                        pointer: { // 仪表盘指针。
                            length: "80%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                            width: 5, // 指针宽度,默认 8。
                        },
                        data: [{ value: cpuData, name: '已分配CPU在总CPU中占比' }]
                    }]
                }
                cpuPanel.setOption(cpuOption);
                $(window).resize(cpuOption.resize);
            };


            // ---------- 仪表盘：memory ----------
            var memoryPanel = echarts.init(document.getElementById('echarts-panel-memory'));
            var memoryOption;

            function memoryFun(memoryTotal, memoryUse, memoryData) {
                memoryOption = {
                    title: {
                        text: '内存分配率',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 14
                        },
                        itemGap: 5,
                        x: 'center',
                        subtext: '总数：' + memoryTotal + 'G' + '  ' + '已用：' + memoryUse + 'G',
                        subtextStyle: {
                            fontSize: 10
                        },
                    },
                    tooltip: {
                        formatter: "{b} : {c}%",
                        confine: true,  // 是否将 tooltip 框限制在图表的区域内
                    },
                    series: [{
                        type: 'gauge', // 系列类型，仪表盘类型
                        center: ["50%", "55%"],
                        title: { // 仪表盘标题。
                            offsetCenter: [0, "100%"], //相对于仪表盘中心的偏移位置
                            color: "#999999", // 文字的颜色,默认 #333。
                            fontSize: 12, // 文字的字体大小,默认 15。
                        },
                        splitNumber: 10, // 仪表盘刻度的分割段数,默认 10
                        detail: { // 仪表盘详情，用于显示数据
                            offsetCenter: [0, "60%"], // 相对于仪表盘中心的偏移位置
                            fontSize: 14, // 文字的字体大小
                            color: "#000000", // 文字的颜色,
                            formatter: '{value}%', // 格式化函数或者字符串
                        },
                        radius: "75%", //仪表大小
                        axisTick: {
                            splitNumber: 2,         // 分隔线之间分割的刻度数,默认 5
                            length: 5,              // 刻度线长。支持相对半径的百分比,默认 8。
                        },
                        axisLine: { // 仪表盘轴线(轮廓线)相关配置
                            lineStyle: { // 仪表盘轴线样式
                                width: 12 // 仪表盘轴线宽度
                            }
                        },
                        axisLabel: { // 刻度标签。
                            distance: 1, // 标签与刻度线的距离,默认 5。
                            fontSize: 10, // 刻度的文字字体大小,默认 5。
                        },
                        splitLine: { // 分隔线样式。
                            length: 20, // 分隔线线长，默认30
                            lineStyle: {            // 分隔线样式。
                                width: 2,                   //线度,默认 2。
                            }
                        },
                        pointer: { // 仪表盘指针。
                            length: "80%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                            width: 5, // 指针宽度,默认 8。
                        },
                        data: [{ value: memoryData, name: '已分配内存在总内存中占比' }]
                    }]
                }
                memoryPanel.setOption(memoryOption);
                $(window).resize(memoryOption.resize);
            };


            // ---------- 仪表盘：disk ----------
            var diskPanel = echarts.init(document.getElementById('echarts-panel-disk'), 'infographic');
            var diskOption;

            function diskFun(diskTotal, diskUse, diskData) {
                diskOption = {
                    title: {
                        text: '磁盘分配率',
                        textStyle: {
                            color: '#343434',
                            fontSize: 14
                        },
                        itemGap: 5,
                        x: 'center',
                        subtext: '总数：' + diskTotal + 'T' + '  ' + '已用：' + diskUse + 'T',
                        subtextStyle: {
                            fontSize: 10
                        },
                    },
                    tooltip: {
                        formatter: "{b} : {c}%",
                        confine: true,  // 是否将 tooltip 框限制在图表的区域内
                    },
                    series: [{
                        type: 'gauge', // 系列类型，仪表盘类型
                        center: ["50%", "55%"],
                        title: { // 仪表盘标题。
                            offsetCenter: [0, "100%"], //相对于仪表盘中心的偏移位置
                            color: "#999999", // 文字的颜色,默认 #333。
                            fontSize: 12, // 文字的字体大小,默认 15。
                        },
                        splitNumber: 10, // 仪表盘刻度的分割段数,默认 10
                        detail: { // 仪表盘详情，用于显示数据
                            offsetCenter: [0, "60%"], // 相对于仪表盘中心的偏移位置
                            fontSize: 14, // 文字的字体大小
                            color: "#000000", // 文字的颜色,
                            formatter: '{value}%', // 格式化函数或者字符串
                        },
                        radius: "75%", //仪表大小
                        axisLine: { // 仪表盘轴线(轮廓线)相关配置
                            lineStyle: { // 仪表盘轴线样式
                                width: 12 // 仪表盘轴线宽度
                            }
                        },
                        axisLabel: { // 刻度标签。
                            distance: 1, // 标签与刻度线的距离,默认 5。
                            fontSize: 10, // 刻度的文字字体大小,默认 5。
                        },
                        splitLine: { // 分隔线样式。
                            length: 20, // 分隔线线长，默认30
                        },
                        pointer: { // 仪表盘指针。
                            length: "80%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                            width: 5, // 指针宽度,默认 8。
                        },
                        data: [{ value: diskData, name: '已分配磁盘空间在总磁盘中占比' }]
                    }]
                }
                diskPanel.setOption(diskOption);
                $(window).resize(diskOption.resize);
            };



            // ---------- 柱状图模板引擎数据 ----------
            var barContext = {
                "barInfo": [
                    { "echarts-type": "echarts-bar-1" },
                    { "echarts-type": "echarts-bar-2" },
                    { "echarts-type": "echarts-bar-3" }
                ]
            };
            var barRes = template(barContext); //匹配json内容
            $("#barRes").html(barRes); //输入模板

            // 柱状图
            var barOption;
            var bar1 = echarts.init(document.getElementById('echarts-bar-1'));
            var bar2 = echarts.init(document.getElementById('echarts-bar-2'));
            var bar3 = echarts.init(document.getElementById('echarts-bar-3'));
            var titleText1 = '监控告警信息';
            var titleText2 = '日志告警信息';
            var titleText3 = '工单信息';
            var dataName1 = ['总监控告警信息', '已处理监控告警信息'];
            var dataName2 = ['总日志告警信息', '已处理日志告警信息'];
            var dataName3 = ['总工单告警信息', '已处理工单告警信息'];

            $.ajax({
                // url: getUrl() + '/index/initIndexTodayInfo',
                url: '../data/index_v0/initIndexTodayInfo.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var data1 = response.jianKong.seriesData;
                    var data2 = response.riZhi.seriesData;
                    var data3 = response.gongDan.seriesData;
                    echartsBar(titleText1, dataName1, data1);
                    bar1.setOption(barOption);

                    echartsBar(titleText2, dataName2, data2);
                    bar2.setOption(barOption);

                    echartsBar(titleText3, dataName3, data3);
                    bar3.setOption(barOption);
                }
            });

            function echartsBar(titleText, dataName, dataBar) {
                barOption = {
                    title: {
                        text: titleText, // 主标题
                        textStyle: {
                            color: '#000000', // 主标题颜色
                            fontSize: 14, // 主标题字大小
                            fontWeight: 'normal',
                        },
                        x: 'center'
                    },
                    // ---  提示框 ----
                    tooltip: {
                        show: true, // 是否显示提示框，默认为true
                        trigger: 'axis', // 数据项图形触发
                        axisPointer: { // 指示样式
                            type: 'shadow',
                        },
                        padding: 1,
                        textStyle: { // 提示框内容的样式
                            color: '#fff'
                        },
                    },
                    // -- 直角坐标系内绘图网格：相当于柱状图整体---
                    grid: {
                        left: '22%' // 离容器左侧的距离
                    },
                    // ------   x轴  ----------
                    xAxis: {
                        type: 'category', // 轴类型， 默认为 'category',
                        axisLabel: { // 坐标轴标签
                            interval: 0, // 0强制显示所有标签
                            color: '#000000', // x轴文字颜色 
                            align: 'center',
                            formatter: function (params) { // 分隔x轴文字
                                var newParamsName = "";
                                var paramsNameNumber = params.length;
                                var provideNumber = 3; //一行显示几个字
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                if (paramsNameNumber > provideNumber) {
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";
                                        var start = p * provideNumber;
                                        var end = start + provideNumber;
                                        if (p == rowNumber - 1) {
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;
                                    }
                                } else {
                                    newParamsName = params;
                                }
                                return newParamsName
                            }
                        },
                        data: dataName
                    },
                    //   ------   y轴  ----------
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            interval: 0,
                            fontSize: 10
                        }
                    },
                    //  -------   内容数据 -------
                    series: [{
                        name: '数量',
                        type: 'bar', // 类型
                        legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
                        label: { // 图形上的文本标签
                            show: true,
                            position: 'top', // 相对位置
                            color: 'black'
                        },
                        itemStyle: { // 图形的形状
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        '#ff9933', '#00cccc'
                                    ];
                                    return colorList[params.dataIndex]

                                }
                            },
                            //鼠标悬停时：
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        barWidth: 20, // 柱形的宽度
                        data: dataBar,
                    }]
                };
            };


        })
    </script>
</body>

</html>